import React, { useEffect, useMemo, useState } from 'react';
import { Badge, Popover, List, Button } from 'antd';
import { SmileOutlined } from '@ant-design/icons';
import store from '@/store';
import './index.scss';
import { config, useAuth } from 'ice';
import { useHistory } from 'ice';
function HeadLogin() {
  const { logout } = store.useModelDispatchers('user');
  const history = useHistory();
  const [isLogout, setLoginout] = useState(false);

  // 备注修改（登出）
  const handleLogOut = () => {
    logout();
    history.push('/');
    // logOutUser().then((res) => {
    //   if (res.code == 0) {
    //     logout();
    //     history.push('/');
    //   }
    // });
  };
  const handleOpen = () => {
    setLoginout(!isLogout);
  };

  return (
    <>
      <div className="tipinfo flex felx-row space-x-2rem pr-2rem">
        <div className="flex flex-row text-[#9BABB8] space-x-0.75rem">
          <Popover
            overlayClassName="loginfo"
            arrow={{ pointAtCenter: false }}
            placement="bottom"
            open={isLogout}
            content={
              <Button
                ghost
                onMouseLeave={() => handleOpen()}
                className="bg-[#000000] text-[#ffffff] border-none"
                onClick={() => handleLogOut()}
              >
                {'退出'}
              </Button>
            }
          >
            <SmileOutlined
              style={{ color: '#9BABB8]', verticalAlign: 'super', fontSize: '1.5rem' }}
              onClick={() => handleOpen()}
            ></SmileOutlined>
          </Popover>

          <span className=" justify-center" onClick={() => handleOpen()}>
            {store.getState('user').user.userName}
          </span>
        </div>
      </div>
    </>
  );
}

export default HeadLogin;
